<template>
<!--  柱状图-->
  <div style="width: 100%;height: 350px; border: 2px solid cyan;
  box-shadow: 1px 1px 20px cyan;">
    <div style="width: 100%;height: 50px"> <Tabbar><div slot="center"><img src="../../assets/img/leave.png" style="width: 30px;height: 30px">请假明细</div></Tabbar></div>
    <div class="abc"><div ref="chart" style="width:100%;height:300px;"></div></div></div>

</template>

<script>
import Tabbar from "../common/Tabbar";
export default {
  name: "bar",
  components:{
    Tabbar
  },
  props:{
    barDate:{
      type:Array,
      default(){
        return[]
      }
    }
  },
  mounted() {
    this.ac= setInterval(this.getA,1000)
    this.setI = setInterval(this.getEchartData,1000)
  },
  beforeDestroy() {
    clearInterval(this.ac)
    clearInterval(this.setI)
  },
  data(){
    return{
      ac:'',
      setI:""

    }
  },

  computed:{

  },
  methods: {

    getA(){
      let a;
      this.a = this.barDate[0]
      this.a=this.a+3;
        if(this.a >30){
          this.a = this.a -20
        }
        this.barDate[0]=this.a

      this.b = this.barDate[0]
      this.b=this.b+2;
      if(this.b >25){
        this.b = this.b -20
      }
      this.barDate[1]=this.b

      this.c = this.barDate[2]
      this.c=this.c+4;
      if(this.c >15){
        this.c = this.c -6
      }
      this.barDate[2]=this.c

      this.d = this.barDate[3]
      this.d=this.d+1;
      if(this.d >10){
        this.d = this.d -4
      }
      this.barDate[3]=this.d

    },

    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
         const option = {
           dataset: {
             source: [
               [this.barDate[0],  '正常'],
               [this.barDate[1],  '婚嫁'],
               [this.barDate[2], '病假'],
               [this.barDate[3], '事假'],
               [this.barDate[4],  '丧假']
             ]
           },
           grid: { containLabel: true },
           xAxis: {
             // name: 'amount'
             axisLine:{
               lineStyle:{
                 color:'white'
               }
             }
           },
           yAxis: { type: 'category',
             axisLine:{
               lineStyle:{
                 color:'white'
               }
             }
             },
           visualMap: {
             orient: 'horizontal',
             left: 'center',
             min: 0,
             max: 30,
             text: ['30', '0'],
             dimension: 0,
             textStyle:{
               color:'white'
             }
           },
           series: [
             {
               type: 'bar',
               encode: {
                 // Map the "amount" column to X axis.
                 x: 'amount',
                 // Map the "product" column to Y axis
                 y: 'product'
               }
             }
           ]
         };

        myChart.setOption(option);
        //当窗口发送变化的时候，改变图表的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //防止多次触发窗口发送变化
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
/*.abc{*/
/*  border: 1px solid cyan;*/
/*  box-shadow: 1px 1px 10px cyan;*/
/*  width: 50%;*/
/*}*/
</style>
